<template>
  <div style="margin-top: 30px; height:980px;">
    <div class="index">
      <div style="margin-top: -800px; text-align: center; font-size: 24px">
        <h1>{{name}}您好，欢迎登录数据库实验自动判卷系统后台</h1>
      </div>
    </div>
    <div class="timeline-carousel-container">
      <!-- 时间线 -->
      <div class="timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in tableStation"
            :key="index"
            :timestamp="item.timestamp"
            placement="top"
          >
            <el-card>
              <h4>{{ item.examName }}</h4>
              <p>{{ item.takeTime ? `${item.name} 参考时间 ${item.takeTime}` : `${item.name} 未参加考试` }}</p>
              <p :class="{'text-red': item.markingStatus === '未阅卷'}">阅卷状态：{{ item.markingStatus }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 使用 Element UI 的轮播图组件 -->
      <div class="carousel">
        <el-carousel
          :loop="true"
          :autoplay="true"
          :interval="3000"
          height="800px"
          width="400px"
          style="margin-top:10px"
          @change="handleCarouselChange"
        >
          <el-carousel-item v-for="(item, index) in examavatar" :key="index">
            <div class="carousel-item-content">
              <img class="top-img" :src="item" alt="轮播图" />
              <div class="carousel-title">
                已发布考试：{{ currentExamName || '未知考试名称' }}
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <el-card shadow="hover" class="mt15 card-content-center" style="position: absolute; bottom: 5px; width: 100%; right:-380px">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQueryParam.current"
        :limit.sync="listQueryParam.pageSize"
        @pagination="getTableDataList"
      />
    </el-card>
  </div>
</template>

<script>
import { getList, insert, update, get, del, getTeacherDate } from '@/api/Exam/index'
import { getList as getStation } from '@/api/ExamStudent/index'
import Pagination from '@/components/Pagination'
import { tableUtil } from '@/mixins/table'
import { Message } from 'element-ui'
import uploadImg from '@/components/ImageUpload'
import { mapState } from "vuex";
import ImgPreview from '@/components/ImgPreview'

export default {
  mixins: [tableUtil],
  components: {
    Pagination,
    uploadImg,
    ImgPreview
  },
  data() {
    return {
      type: localStorage.getItem('examType'),
      listQueryParam: {
        current: 1,
        pageSize: 5
      },
      currentId: 0,
      showEcharts: false,
      formData: {},
      rules: {
        examName: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
        ],
        teacherId: [
          { required: true, message: '请选择老师信息', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择考试截止日期', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      teacherIdOptions: [],
      examavatar: [], // 存储轮播图的图片路径
      currentImageIndex: 0, // 当前显示的图片索引
      tableData: [], // 存储表格数据
      tableStation: [] // 存储表格数据
    }
  },
  computed: {
    currentExamName() {
      return this.tableData[this.currentImageIndex]?.examName || '未知考试名称'
    },
    ...mapState({
      name: state => state.user.name,
      avatar: state => state.user.avatar,
      id: state => state.user.id,
    })
  },
  mounted() {
    this.getTableDataList()
    this.getTeacherDateList()
  },
  methods: {
    showEcharts1(row) {
      this.currentId = row.id
      this.$router.push('/echarts/index/' + this.currentId)
    },
    getTableDataList() {
      if (this.type == 1) {
        this.listQueryParam.teacherId = localStorage.getItem('examId')
      }
      getList(this.listQueryParam).then((res) => {
        this.total = res.data.total
        this.tableData = res.data.records
        // 从 tableData 中提取 examavatar 图片路径
        this.examavatar = this.tableData.map((item) => item.examavatar)
      }),
      getStation(this.listQueryParam).then((res) => {
        this.tableStation = res.data.records.map(record => {
          const markingStatus = record.examDetailDTOS.length > 0 ? "已阅卷" : "未阅卷";
          console.log("status:", markingStatus);
          return { ...record, markingStatus }; // 确保 markingStatus 被添加到每一行的数据中
        });
        console.log("station:",this.tableStation);
      })
    },
    getTeacherDateList() {
      getTeacherDate().then((res) => {
        this.teacherIdOptions = res.data
      })
    },
    handleCarouselChange(index) {
      this.currentImageIndex = index
    }
  }
}
</script>

<style scoped>
.index {
  margin-left: 70px;
  background-image: url('../../assets/bg2.gif');
  background-size: 50% cover;
  background-position: -15% center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.timeline-carousel-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: -820px;
}
.timeline {
  width: 50%; /* 时间线宽度 */
  margin-right: 20px; /* 与轮播图的间距 */
}
.carousel {
  width: 50%; /* 轮播图宽度 */
}
.el-carousel {
  width: 100%; /* 轮播图宽度 */
  height: 800px; /* 轮播图高度 */
}
.carousel-item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-title {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;
}
.top-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.card-content-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  position: relative;
  z-index: 1;
  background-color: transparent;
}
.text-red {
  color: red;
}

</style>